<template>
  <div class="zhibo">
    <header class="header">
       <router-link to='sousuo'>
           <div class="left">
            <img src="../assets/img/SearchIcon.png" >
          </div>
       </router-link>
        
        <ul class="center">
        	<router-link to='zhibo'>
        		<li class="list active">直播</li>
        	</router-link>
        	
        	<router-link to='pindao'>
        		<li class="list">频道</li>
            
        	</router-link>
        	
        	<router-link to='tuijian'>
        		
            <li class="list">推荐</li>
            
        	</router-link>
        	
        	<router-link to='dingyue'>
        		
            <li class="list">订阅</li>
        	</router-link>
            
           
            
        </ul>
        <router-link to='reg'>
            <div class="right">
                <img src="../assets/img/zhuboRight.png">
            </div>
            
        </router-link>
        
    </header>
    
    <section class="section">
        <div class="swiper-container">
            <div class="swiper-wrapper">
               <div class="swiper-slide">
                  <img src="../assets/img/zhibo_nav.png">
               </div>
               <div class="swiper-slide">
                  <img src="../assets/img/zhibo_nav.png">
               </div>
               <div class="swiper-slide">
                  <img src="../assets/img/zhibo_nav.png">   
               </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
         <div class='wrap_bang'>
              <div class="bang">
                  <div class="content">今日荔枝榜</div>
                  <ul class="nav">
                      <li class="list">
                          <div class="img">
                              <img src="../assets/img/dog.png" >
                          </div>
                          <div class="title">狗哥</div>
                      </li>
                      <li class="list">
                          <div class="img"><img src="../assets/img/dog1.png" ></div>
                          <div class="title">Fm狗哥</div>
                      </li>
                      <li class="list">
                          <div class="img"><img src="../assets/img/dog2.png" ></div>
                          <div class="title">狗哥</div>
                      </li>
                  </ul>

              </div>  
              <div class="bangSub"></div>
           </div> 
        
            <ul class="zhibozone">
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/zhiboV.png">
                    </div>
                    <div class="title">指路</div>    
                    <div class="name">Nj 柚子 （荔湾Radio）</div>              
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/lizhi.png">
                    </div>
                    <div class="title">指路</div>    
                    <div class="name">Nj 柚子 （荔湾Radio）</div>              
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/xiache.png">
                    </div>
                    <div class="title">指路</div>    
                    <div class="name">Nj 柚子 （荔湾Radio）</div>              
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/xiache.png">
                    </div>
                    <div class="title">指路</div>    
                    <div class="name">Nj 柚子 （荔湾Radio）</div>              
                </li>
                
                
            </ul>
        
        
        
        
    </section>
    
    
    
    
  </div>
</template>



<script>
import Swiper from "swiper"
    
    
export default {
  name: 'zhibo',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
 mounted () {
     window.Swiper('.swiper-container',{
    autoplay:5000,
    pagination: '.swiper-pagination',
  })
 }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/css/swiper.min.css';   
   
    .header{
        .webkit();
        justify-content: center;
        align-items: center;
        .margin-bottom(50);
        .px2rem(height,80);
        .px2rem(line-height,80);
        .font-size(28);
        a{
          .left{
            .padding(20,20,0,20);
            
         }  
        }
        
        .center{
            flex: 1;
            .webkit();
            justify-content: center;
            align-items: center;
            a{
                flex: 1;
            		.list{
	                text-align: center;
	                &.active{
	                    color: red;
	                }
	            }
            }
            
        }
        
        .right{
            .padding(20,20,0,20);
        }
    }
    
    .section{
        position: fixed;
        .top(100);
        .left(50);
        
        overflow-y: hidden;
        .swiper-container{
            margin: 0 auto;
            text-align: center;
            .border-radius(10);
            .px2rem(width,660);
        }
        .bang{
            background: white;
            .px2rem(width,660);
            margin: auto;
            .margin-top(50);
            .border-radius(10);
            .webkit();
            box-shadow: 0 0 20px black;
            align-items: center;
            z-index: 5;
            .content{
                flex: 1;
                .padding-left(20);
                .px2rem(height,150);
                .px2rem(line-height,150);
                text-align: center;
                font-weight: bold;
                opacity: 0.8;
                .font-size(24);
                
                
            }
            .nav{
                flex: 1;
                .webkit();
                
                .list{
                    .webkit();
                    flex: 1;
                    justify-content: center;
                    flex-direction: column;
                    .px2rem(height,90);
                    
                    .img{
                        text-align: center;
                       .px2rem(height,90);
                        
                    }
                    .title{
                        text-align: center;
                        display: block;
                        .padding-top(10);
                    }
                    
                }
                
            }
            
        }
        
        .bangSub{
             background: white;
            .px2rem(width,630);
            .px2rem(height,15);
            margin: auto;
            .px2rem(border-bottom-left-radius,5);
            .px2rem(border-bottom-right-radius,5);
            box-shadow: 0 0 20px grey;
            z-index: 2;
        }
        .zhibozone{
            display: flex;
            margin: 0 auto;
            .margin-top(50);
           .px2rem(width,660);
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .list{
                flex: 1;
                .margin-top(50);
                
                .img{

                }
                .title{
                    .font-size(24);
                    .px2rem(height,50);
                    .px2rem(line-height,50);
                    
                }
                
                .name{
                    .font-size(18);
                    opacity: 0.7;
                }
            }
        }
        
    }
    
</style>
